import { PageContainer } from '@ant-design/pro-layout';
import TbaleExplainMap from '@/components/TipsMap';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown, ProCard } from '@ant-design/pro-components';
import { Button, Dropdown, Menu, Space, Tag, message, Steps } from 'antd';
import React, { useRef } from 'react';
import request from 'umi-request';
import { Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormList,
} from '@ant-design/pro-components';

const { Step } = Steps;

const columns = [
  {
    title: '事务编号',
    dataIndex: '事务编号',
    // valueType: 'indexBorder',
    // width: 80,
  },
  {
    title: '事务名称',
    key: '事务名称',
    dataIndex: '事务名称',
    copyable: true,
    ellipsis: true,
  },
  // {
  //     title: '发起人范围',
  //     key: '发起人范围',
  //     dataIndex: '发起人范围',
  //     copyable: true,
  //     ellipsis: true,
  //     hideInSearch: true,
  // },
  {
    title: '创建时间',
    key: '创建时间',
    dataIndex: '创建时间',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '用途',
    key: '用途',
    dataIndex: '用途',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '备注',
    key: '备注',
    dataIndex: '备注',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '有效期',
    key: '有效期',
    dataIndex: '有效期',
    copyable: true,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => {
      return (
        <ModalForm<{
          name: string;
          company: string;
        }>
          title="发起流程"
          trigger={<a>发起</a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            await waitTime(2000);
            console.log(values.name);
            message.success('提交成功');
            return true;
          }}
          layout={'horizontal'}
        >
          <ProForm.Group title={'事务信息'}>
            <ProFormText width="sm" name="学号" label="学号" />
            <ProFormText width="sm" name="姓名" label="姓名" />
            <ProFormText width="sm" name="班级" label="班级" />
            <ProFormText
              width="md"
              name="contract"
              label="请假理由"
              placeholder="请输入名称"
            />
            <ProFormDateRangePicker
              width="md"
              name="contractTime"
              label="请假时间"
            />
          </ProForm.Group>

          <ProForm.Group title={'事务处理人员'}>
            <ProFormSelect
              width="sm"
              name="发起人"
              label="发起人"
              valueEnum={{
                open: '发起人1',
                closed: '发起人2',
              }}
            />
            <ProFormSelect
              width="sm"
              name="审批人"
              label="审批人"
              valueEnum={{
                open: '审批人1',
                closed: '审批人2',
              }}
            />
            <ProFormSelect
              width="sm"
              name="抄送人"
              label="抄送人"
              valueEnum={{
                open: '抄送人1',
                closed: '抄送人2',
              }}
            />
          </ProForm.Group>
        </ModalForm>
      );
    },
  },
];
const dataSource = [
  {
    序号: 1,
    研究方向: '电工装备可靠性理论与失效机理',
    研究内容:
      '针对电工装备在多能源电网运行状态下的可靠性建模与预测关键科学技术问题，开展电工装备零部件及系统失效演化机理与建模、可靠性分析与设计、运行状态监测与评价等基础研究，为提高电网运行可靠运行奠定理论基础。',
    可向社会提供的服务特色:
      '电工装备在复杂运行条件下性能退化规律和损伤累积效应，失效分布规律；电工装备剩余寿命预测和可靠性评价。',
  },
  {
    序号: 2,
    研究方向: '电工装备电磁综合效应',
    研究内容:
      '开展电磁基础建模与计算、新型电磁系统设计、电磁综合效应分析、复杂电磁环境下电工装备电磁干扰机理及其可靠性新方法研究，为开发高可靠、低能耗的电工装备提供理论支撑。',
    可向社会提供的服务特色:
      '电磁场数值计算，电磁装置特性的建模方法及电磁环境模拟分析。',
  },
  {
    序号: 3,
    研究方向: '先进电工材料微结构与性能调控',
    研究内容:
      '从新型电工材料的结构与性能调控方法、功能材料构效关系、应用基础理论和关键器件技术方面开展研究。',
    可向社会提供的服务特色:
      '半导体材料的外延生长和电力电子器件工艺技术；建立新型电工材料理论基础和材料特性数据库。',
  },
  {
    序号: 4,
    研究方向: '电工装备状态感知与智能控制',
    研究内容:
      '围绕智能电网中电工装备智能运行与控制的基础科学问题开展研究，通过智能传感与量测、高效驱动与智能控制、新能源电网与电力电子系统控制等的基础研究与应用基础研究，为实现电工装备高效运行和智能化奠定基础。',
    可向社会提供的服务特色:
      '特种高端智能传感量测技术和信号处理，设计高转矩密度、小转矩脉动新型电机系统。',
  },
];
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      dataSource={dataSource}
      rowKey="序号"
      search={{
        labelWidth: 'auto',
      }}
      pagination={{
        pageSize: 10,
        // onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      headerTitle="方向列表"
      toolBarRender={() => [<Button type="primary">操作</Button>]}
    />
  );
};
